<template>
    <view class="container">
        <u-navbar
            title="钱包提现"
            :autoBack="true"
            leftIconSize="50rpx"
            height="100rpx"
            :fixed="false"
            @rightClick="$u.route('pages_v2/wallet/withdrawState')"
        >
            <u-text
                slot="right"
                text="提现状态"
                size="26rpx"
                color="#4A4A4A"
            ></u-text>
        </u-navbar>
        <view class="withdraw-tips">提现到账日期为T+1天</view>
        <view class="p-32">
            <view class="label-2">
                <u-text
                    text="输入提现金额"
                    size="26rpx"
                    color="#888888"
                    margin="0 0 0 14rpx"
                ></u-text>
                <u-text
                    :text="'可用余额：'+ balance"
                    size="26rpx"
                    color="#356CE7"
                    align="right"
                    margin="0 12rpx 0 0"
                ></u-text>
            </view>
            <u-input
                :placeholder="'最低提现'+minWithdrawMoney+'元'"
                border="none"
                v-model="money"
                type="number"
                fontSize="34rpx"
                color="#000000"
                :customStyle="{
                    padding: '32rpx',
                    background: '#F8F8F8',
                    borderRadius: '4rpx',
                    fontWeight: 400
                }"
            ></u-input>
            <u-text
                text="选择提现方式"
                size="26rpx"
                color="#888888"
                margin="80rpx 0 22rpx 14rpx"
            ></u-text>
            <view
                class="payment-default"
                @click="paySheetShow=true"
                v-if="payment"
            >
                <view class="payment-left">
                    <u-icon
                        :name="payment.platform.icon"
                        width="50rpx"
                        height="50rpx"
                    ></u-icon>
                    <u-text
                        :text="payment.platform.name + '('+secretAccount(payment.account, payment.platform.type)+')'"
                        size="28rpx"
                        color="#000000"
                        margin="0 0 0 10rpx"
                    ></u-text>
                </view>
                <u-icon
                    name="arrow-right"
                    size="40rpx"
                ></u-icon>
            </view>
            <view
                class="payment-empty"
                v-else
                @click="$u.route({
                    url: 'pages_v2/paymentSave/index',
                    params: {type: 'select'}
                })"
            >
                添加收款方式
            </view>
        </view>
        <view class="bottom">
            <u-text
                :text="'提现手续费：'+withdrawFeeRate*100+'%'"
                size="22rpx"
                color="#356CE7"
                align="center"
                margin="0 0 20rpx 0"
            ></u-text>
            <u-button
                text="确认提现"
                :customStyle="{
                    height: '90rpx',
                    background: '#000000',
                    fontSize: '30rpx',
                    color: '#FFFFFF'
                }"
                @click="onsubmit"
            ></u-button>
        </view>
        <u-popup
            :show="popupShow"
            mode="center"
            :customStyle="{
                width: '660rpx',
                background: '#FFFFFF',
                boxShadow: '0px 0px 13rpx 0px #999999',
                borderRadius: '18rpx',
                overflow: 'hidden'
            }"
        >
            <popup-context
                v-if="popupShow"
                @cancel="popupShow = false"
                @confirm="submit"
                :extData="extData"
                :p_type="popupType"
            ></popup-context>
        </u-popup>
        <u-action-sheet
            :show="paySheetShow"
            round="36rpx"
            safeAreaInsetBottom
        >
            <view class="sheet-pay-body">
                <view class="sheet-pay-title">选择提现方式</view>
                <view class="sheet-close-icon" @click="paySheetShow = false"></view>
                <u-list
                   height="509rpx"
                >
                    <view class="sheet-pay-ul">
                        <block v-for="item in paymentList" :key="item.id">
                            <view class="sheet-pay-li" @click="selectPayment(item)">
                                <view class="sheet-pay-info" v-if="item.platform">
                                    <u-icon
                                        :name="item.platform.icon"
                                        width="54rpx"
                                        height="54rpx"
                                    ></u-icon>
                                    <u-text
                                        :text="item.platform.name + '('+secretAccount(item.account, item.platform.type)+')'"
                                        size="32rpx"
                                        color="#000000"
                                        margin="0 0 0 25rpx"
                                    ></u-text>
                                </view>
                                <view class="icon-action-action" v-if="item.id === payment.id"></view>
                            </view>
                        </block>
                    </view>
                </u-list>
                <view class="h-30"></view>
                <u-button
                    text="添加收款方式"
                    :customStyle="{
                        height: '90rpx',
                        background: '#F0F4F8',
                        fontSize: '30rpx',
                        color: '#356CE7'
                    }"
                    @click="addPayment"
                ></u-button>
            </view>
        </u-action-sheet>
        <u-notify ref="uNotify"></u-notify>
    </view>
</template>

<script>
    import PopupContext from "@/components/PopupContext"
    import { secretText } from "@/untils"
    import { userWithdraw } from "@/config/api-java"
    import { getPaymentPages } from "@/config/api"
    export default {
        name: "withdraw",
        components: {
            PopupContext
        },
        data() {
            return {
                money: null,
                popupShow: false,
                extData: {},
                popupType: "security",
                paySheetShow: false,
                paymentList: [],
                notifyShow: true
            }
        },
        computed: {
            withdrawFeeRate() {
                return this.$store.getters.withdrawFeeRate
            },
            minWithdrawMoney() {
                return this.$store.getters.minWithdrawMoney
            },
            balance() {
                return this.$store.getters.balance
            },
            payment() {
                return this.$store.getters.payment
            }
        },
        onShow() {
            this.popupShow = false
            this.getPaymentData()
        },
        methods: {
            secretAccount(text, type) {
                if (type === 'alipay') {
                    return secretText(text, 3, -3, '***')
                } else if (type === 'bank') {
                    return secretText(text, 4, -4, '******')
                } else {
                    return text
                }
            },
            async submit(info) {
                var data = {
                    code: info.code,
                    money: this.money,
                    paymentId: this.$store.getters.payment.id,
                    safePass: info.password
                }
                const res = await userWithdraw(data)
                this.popupShow = false
                this.$refs.uNotify.show({
                    message: '提现成功',
                    type: 'success',
                    color: '#ffffff',
                    bgColor: '',
                    fontSize: '28rpx',
                    duration: 3000,
                    top: 80
                })
                this.$store.dispatch("user/setBalance", this.$store.getters.balance-this.money)
            },
            async getPaymentData() {
                const res = await getPaymentPages({page: 1, list_rows: 100})
                this.paymentList = res.items
            },
            async selectPayment(item) {
                await  this.$store.dispatch("user/setPayment", item)
                this.paySheetShow = false
            },
            addPayment() {
                this.paySheetShow = false
                uni.$u.route({
                    url: 'pages_v2/paymentSave/index',
                    params: {type: 'select'}
                })

            },
            onsubmit() {
                if (!this.$store.getters.safePass) {
                    this.popupType = 'safePass'
                    this.popupShow = true
                    return
                }
                this.popupType = 'security'
                this.popupShow = true
            }
        }
    }
</script>

<style lang="scss" scoped>
    .container {
        .p-32 {
            padding: 0 32rpx;
        }
        .withdraw-tips {
            height: 50rpx;
            background: #F0F3FD;
            font-size: 22rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #356CE7;
            text-align: center;
            line-height: 50rpx;
        }
        .label-2 {
            display: flex;
            justify-content: space-between;
            margin-top: 60rpx;
            margin-bottom: 22rpx;
        }
        .payment-empty {
            height: 90rpx;
            background: #F0F4F8;
            border-radius: 4rpx;
            font-size: 30rpx;
            font-family: PingFangSC-Regular, PingFang SC;
            font-weight: 400;
            color: #356CE7;
            text-align: center;
            line-height: 90rpx;
        }
        .bottom {
            background: #ffffff;
            position: fixed;
            z-index: 999;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 20rpx 20rpx calc(var(--window-bottom) + 33rpx) 20rpx;
        }
        .payment-default {
            display: flex;
            justify-content: space-between;
            background: #F8F8F8;
            border-radius: 4rpx;
            height: 130rpx;
            padding: 0 32rpx;
            .payment-left {
                display: flex;
            }
        }
        .sheet-pay-body {
            padding: 54rpx 26rpx 33rpx 26rpx;
            position: relative;
            .sheet-pay-title {
                font-size: 36rpx;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #000000;
                margin-bottom: 49rpx;
            }
            .sheet-pay-ul {
                padding-top: 49rpx;
                .sheet-pay-li {
                    margin-bottom: 70rpx;
                    padding-left: 21rpx;
                    padding-right: 16rpx;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .sheet-pay-info {
                        display: flex;
                        align-items: center;
                    }

                    .icon-action-action {
                        background: url("../../static/icon_pay_action.png") no-repeat;
                        background-size: 100% 100%;
                        width: 50rpx;
                        height: 50rpx;
                    }
                }
            }
            .h-30 {
                height: 30rpx;
                background: #ffffff;
            }
            .sheet-close-icon {
                background: url("https://img.ionepin.com/e6ca3bf6b372078fed03bc62894656f098fac42c.png") no-repeat;
                background-size: 100% 100%;
                width: 44rpx;
                height: 44rpx;
                position: absolute;
                top: 30rpx;
                right: 38rpx;
            }
        }
    }
</style>
